<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>椭圆</title>
  <style>
    .ellipse {
      background-color: #f00;
      border-radius: 50% / 50%;
      text-align: center;
      width: 40%;
    }

    .half-ellipse {
      background-color: yellow;
      width: 200px;
      height: 300px;
      border-radius: 50% / 100% 100% 0 0;
    }
    .half-ellipse2 {
      background-color: darkgoldenrod;
      width: 200px;
      height: 300px;
      border-radius: 50% / 0 0 100% 100%;
    }
    .quarter-ellipse {
      background-color: cyan;
      width: 300px;
      height: 250px;
      border-radius: 100% 0 0 0 / 100% 0 0 0;
    }
  </style>
</head>
<body>
<div class="ellipse">
  test for ellipse if width is larger than height
</div>
<div class="half-ellipse"></div>
<div class="half-ellipse2"></div>
<div class="quarter-ellipse"></div>
</body>
</html>